<%--
  Created by IntelliJ IDEA.
  User: Shinelon
  Date: 2019/8/18
  Time: 17:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>商品列表</title>
    <link href="layui/css/layui.css" type="text/css" rel="stylesheet"/>
    <style type="text/css">
        /*自定义页面效果*/
        /*通过页面元素查看类名*/
        .layui-table-cell{
            height:auto;
            line-height:28px;
        }
    </style>
    <script src="layui/layui.js" type="text/javascript"></script>
    <script src="js/jquery-1.12.4.js" type="text/javascript"></script>

    <script type="text/javascript">
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#myTable',//一般都是些id选择器
                url:"product/selectProductsByPage",//数据接口：请求地址
                page: true,//开启分页

                //where:{"categoryId":101},//发送额外参数
                //toolbar:"#myToolbar",
                title:"商品列表",//导出文件时的名字

                //列
                cols: [[ //表头
                    {field: 'id', title: '编号',align:"center",width:"10%"},
                    {field: 'name', title: '名字',align:"center",width:"10%"},
                    {field: 'price', title: '单价',align:"center",width:"5%"},
                    {field: 'stock', title: '库存',align:"center",width:"5%"},
                    {field: 'description', title: '商品描述',align:"center",width:"15%"},
                    {templet:"#type", title: '商品类型',align:"center",width:"10%"},
                    {field: 'createTime', title: '创建时间',align:"center",width:"15%"},
                    {field: 'updateTime', title: '修改时间',align:"center",width:"15%"},
                    {templet:"#caoZuo",title:'操作',align:"center",width:"15%"}
                ]]
            });

        });

        //确认添加购物车
        function toConfirmAddCart(id) {
            layui.use(['layer','table'],function () {
                var layer = layui.layer;
                var table = layui.table;

                //弹出confirm确认框
                //function为点击确认后执行的函数
                parent.layer.confirm("确认要将该商品添加到购物车吗？",{icon:3,title:"添加购物车提示"},function () {
                    //console.log(id);

                    //发送请求
                    $.ajax({
                        url:"cart/insert",
                        data:{"productId":id},
                        type:"post",
                        success:function (data) {
                            //1.提示成功
                            if(data.isInsert){
                                parent.layer.alert("添加成功！",{icon:1,time:2000});
                            } else {
                                parent.layer.alert("添加失败！",{icon:2,time:2000});
                            }

                            //刷新购物车管理中的信息
                            var cart = parent.document.getElementById("购物车列表");
                            if(cart != null){
                                cart.contentWindow.reloadTable();
                            }
                        }
                    })
                })
            });
        }

    </script>

    <%-- 商品类型 --%>
    <script type="text/html" id="type">
        {{#  if(d.type == 11){ }}
            好吃的
        {{#  } else { }}
            推荐的
        {{#  } }}
    </script>

    <%-- 操作栏 --%>
    <script type="text/html" id="caoZuo">
        <button type="button" class="layui-btn layui-btn-radius layui-btn-normal layui-btn-sm" onclick="toConfirmAddCart('{{d.id}}')">
            <i class="layui-icon">&#xe698;</i> 添加到购物车
        </button>
    </script>

</head>
<body>

    <%-- 表 --%>
    <table id="myTable"></table>

</body>
</html>
